<template>
    <page class="change-phone-number">
        <v-back/>
        <div class="form">

            <div class="cell-item">
                <span class="cell-item-key">手机号</span>
                <div class="cell-item-value">
                    <input type="number" placeholder="请输入新的手机号码" v-model="params.phone"/>
                </div>
            </div>
            <div class="cell-item">
                <span class="cell-item-key">验证码</span>
                <div class="cell-item-value">
                    <div class="input">
                        <input type="number" placeholder="请输入验证码" v-model="params.code"/>
                    </div>
                    <div class="change">
                        <a href="javascript: void (0)" @click="sendCode" v-if="!isSend">发送验证码</a>
                        <a href="javascript: void (0)" v-else>{{time}}s</a>
                    </div>
                </div>
            </div>

            <div class="btn-group">
                <v-button @click="submit">提交修改</v-button>
            </div>
        </div>
    </page>
</template>

<script>
    import { mapGetters,mapMutations } from 'vuex'
    const TIME = 60;
    export default {
        computed: {...mapGetters(['wxInfo'])},
        data(){
            return{
                time: TIME,
                params: {
                    phone: '',
                    code: ''
                },
                isSend: false,
            }
        },
        methods: {
            ...mapMutations(['SET_WX_INFO','SET_USERINFO']),
            //发送验证码
            async sendCode(){
                if(!this.params.phone) return this.$toast.error('请输入手机号');
                this.$loading();
                try {
                    await this.sendPhone(this.params.phone);
                    this.isSend = true;
                    this.cuntDown();

                }catch (e) {
                    console.log(e);
                    this.$toast.error('获取验证码失败');
                }finally {
                    this.$loading.close();
                }
            },

            //倒计时
            cuntDown(){
                var interval = setInterval(_ => {
                    if(this.time > 1){
                        this.time --;
                    }else {
                        this.time = TIME;
                        this.isSend = false;
                        clearInterval(interval);
                    }
                },1000);
            },
            async submit(){
                if(!this.params.phone){
                    return this.$toast.error('请输入手机号');
                }else if(!this.params.code) {
                    return this.$toast.error('请输入验证码');
                }
                this.$loading();
                try {
                    const res = await this.$http.put('/mp/user/phone', this.params);
                    if(res.errorCode !== '00000') return this.$toas.error('操作失败');
                    this.$toast.success('更换手机号成功');
                    localStorage.setItem('userinfo',JSON.stringify(res.data));
                    this.SET_USERINFO(res.data);
                    this.$router.go(-2);
                }finally {
                    this.$loading.close();
                }

            }
        }
    }
</script>

<style scoped lang="less">
    .change-phone-number{
        .form{
            .cell-item{
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: .46rem;
                border-bottom: 1px solid @border-color;
                padding: 0 @padding;
                &:first-child{
                    border-top: 1px solid @border-color;
                }
                &-key{
                    display: block;
                    width: .85rem;
                    min-width: .85rem;
                    text-align: left;
                    color: #333;
                    font-size: @large;
                }
                &-value{
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .input{
                        flex: 1;
                        >input{
                            width: 100%;
                        }
                    }
                    input{
                        color: #333;
                        font-size: @large;
                        outline: none;
                        border: none;
                        height: 100%;
                        &::placeholder{
                            color: #ccc;
                            font-size: @large;
                        }
                    }
                    .change{
                        width: 1rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: .22rem;
                        border-left: 1px solid @border-color;
                        a{
                            color: #1677FF;
                            font-size: @large;
                            font-weight: 400;
                        }
                    }
                }
            }
            .btn-group{
                padding: @padding;
            }
        }
    }
</style>
